
.title{
    display: flex;
    flex-direction: column;
    align-items: center;
    h1{
        margin-top: 5em;
        font-size: 3.82em;
        text-transform: uppercase;
        text-align: center;
        font-family: OSBold;
    }
    h3{
        font-family: OSLtalic;
        font-size: 1.5em;
        color: #606060;
        text-align: center;
        margin-bottom: 2.5em;
    }
    a{
        line-height: 4.3em;
        text-align: center;
        width: 16.4em;
        height: 4.3em;
        border: 1px solid #ccc;
        color: #222;
    }
}
.banner{
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 170px;
    &>div{
        height: 886px;
    }
    .ban-l{
        width: 295px;
        
        .ban-l-1{
            
            position: relative;
            &>div{
                position: absolute;
                top: 0;
                width: 100%;
                height: 590px;
                background-color: #606060;
                opacity:0 ;
                text-transform: uppercase;       
                text-align: center;
                color: #fff;
                &>p{
                    margin-top: 85%;
                    font-size: 20px;
                    
                    font-family: OSBold;
                }
                &>span{
                    font-family: OSLtalic;
                    font-size: 12px;
                }
                &:hover{
                    opacity: 1;
                }
            }
            img{
                width: 100%;
                height: 591px;
                border: 1px solid #ccc;
            }
        }
        
        .ban-l-2{
            position: relative;
            &>div{
                position: absolute;
                top: 0;
                width: 100%;
                height: 295px;  
                background-color: #606060;
                opacity:0 ;
                &:hover{
                    opacity: 1;
                }
            }
            img{
              width: 100%;
              height: 295px;  
              border: 1px solid #ccc;
            }
            
        }
    }
    .ban-m{
        width: 590px;
            
        display: flex;
        flex-wrap: wrap;
       &>div{
        position: relative;
        &>div{
            position: absolute;
            top: 0;
            width: 100%;
            height: 294px;  
            background-color: #606060;
            opacity:0 ;
            &:hover{
                opacity: 1;
            }
        }
       }
        img{
            width: 295px;
            height: 295px;
            border: 1px solid #ccc;
        }

    }
    
    
    
}

.sou_suo{
    padding-top: 145px;
    h1{
        
        text-align: center;
        font-size: 26px;
        font-family: OSBold;
        text-transform: uppercase;
    }
    p{
        text-align: center;
        font-size: 14px;
        margin-bottom: 144px;
        color: #959595;
        font-family: OSLtalic;
    }
    .s_input{
     
        margin: 0 auto;
        width: 37%;
        height: 55px;
        display: flex;
        .inp-l{
            width: 80%;
            height: 100%;
            border: 1px solid #959595;
        }
        .b-add{
            width: 20%;
            height: 100%;
            background-color: #f68236;
            border: none;
        }
        margin-bottom: 132px;
    }
    
}
@media screen and (max-width:1250px) {
    .banner{
       &>div{
        height: 591px;
    }
    .ban-l{
        width: 196.6px;
      
        .ban-l-1{
            img{                   
                height: 393px;
            }
              &>div{
            height: 393px;
        }
        }
        .ban-l-2{  
            img{
               height: 197px; 
            }           
            &>div{
                height: 197px; 
            }
        }
    }
    .ban-m{
        width: 394px;
             
        display: flex;
        flex-wrap: wrap;
        img{
            width: 196.7px;
            height: 196.7px;
        }
        &>div>div{

            height: 196.7px;
        }

    } 
    }
    
   
}
@media screen and(min-width:1580px) {
.banner{
    &>div{
        height: 1107.5px;
    }
    .ban-l{
        width: 368.75px;
        
        .ban-l-1{
            img{                   
                height: 737.5px;
            }
            &>div{
            height: 737.5px;
        }
        }
        .ban-l-2{  
            img{
               height: 368.75px;
            }  
            &>div{
                height: 368.75px;
            }         
            
        }
    }
    .ban-m{
        width: 737.5px;
             
        display: flex;
        flex-wrap: wrap;
        img{
            width: 368.75px;
            height: 368.75px;
        }

    }
}
    
}

@media screen and (max-width:788px) {
.banner{
   .ban-m{
        height: 1182px;
        justify-content: center;

    } 
}
.sou_suo{
    
    .s_input{
     
     
        height: 30px;
       
     
        
    }
    
} 
    
}
@media screen and (max-width:830px){
.swiper{
    height: 60px;
}
.banner{width: 50%;}
    
    
}